<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .todo-item{
      display: flex;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>任务列表</h1>
  <div>
    <!--通过属性来指定自定义的值
      如果没有v-bind的话，就是普通的文字数据
      如果有v-bind的话，就看传入的数据的类型
    -->
    <todo-item data1="1000+500" :data2="  1000 + 500   "></todo-item>
  </div>

</div>


<template id="todo-item-template">
  <div>
    {{data1 + 1000}} <br>
    {{data2 + 1000}}
  </div>
</template>

<script src="js/vue.js"></script>
<script>
  // 定义全局组件
  Vue.component("todo-item",{
    // 组件中的数据部门必须是函数的方式返回
    data:function () {
      return {
      }
    },
    // 定义属性：
    props: ["data1","data2"],
    methods:{},
    // 组件的模板，除了直接写内容结构之外，也可以写一个选择器
    template:"#todo-item-template"
  });

  var vm = new Vue( {
    el: "#app",
    data:{
      message: "hello!"
    },
    methods:{},
    computed:{},
    created:function () {},
    watch:{},
    filters:{}
  } );

</script>
</body>
</html>
